
import React, { useState, ReactNode, Fragment } from 'react';
import { Space, Switch, Table, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import { createFromIconfontCN } from '@ant-design/icons';


const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3851037_c492wh1c7y.js', // 在 iconfont.cn 上生成
});
interface DataType {
    key: string;
    name: string;
    money: string;
    address: string;
    btnicon?: ReactNode
}

const columns: ColumnsType<DataType> = [
    {
        title: 'ID',
        dataIndex: 'name',
        width: 100,
        render: (text) => <a>{text}</a>,
        align: 'center'
    },
    {
        title: '排序',
        width: 100,
        className: 'column-money',
        dataIndex: 'money',
        align: 'center'

    },
    {
        title: '分类',
        dataIndex: 'address',
        width: 60,
        align: 'center'
    },
    {
        title: '图片',
        dataIndex: 'address',
        width: 60,
        align: 'center'
    },
    {
        title: '尺寸',
        dataIndex: 'address',
        align: 'center'
    },
    {
        title: '链接地址',
        dataIndex: 'address',
        align: 'center'
    },
    {
        title: '加入时间',
        dataIndex: 'address',
        align: 'center'
    },
    {
        title: '状态',
        dataIndex: 'address',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'btnicon',
        align: 'center',
        filterIcon: true
    },
];

const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        money: '￥300,000.00',
        address: 'New York No. 1 Lake Park',

    },
    {
        key: '2',
        name: 'Jim Green',
        money: '￥1,256,000.00',
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        money: '￥120,000.00',
        address: 'Sidney No. 1 Lake Park',
    },
];
 

const dropdownRender:any = ()=>[
    {
      value: 'jack',
      label: 'Jack',
    },
    {
      value: 'lucy',
      label: 'Lucy',
    },
    {
      value: 'disabled',
      disabled: true,
      label: 'Disabled',
    },
    {
      value: 'Yiminghe',
      label: 'yiminghe',
    },
  ]

const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const CarsouelManagerment: React.FC = () => {
    const [checkStrictly, setCheckStrictly] = useState(false);
    return (
        <>
            <button>+  添加轮播图</button>
            <button>-  批量删除</button>
             
            <Table
                rowSelection={{ ...rowSelection, checkStrictly }}
                columns={columns}
                dataSource={data}
                bordered
                title={() => {
                    return (

                        <Fragment>
                            每页显示
                            <Select dropdownRender={dropdownRender}></Select>
                        </Fragment>
                    )
                }}
            />
        </>
    )
}

export default CarsouelManagerment